<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {isEmptyString} from "@/utils/string";
import {formatTimeAgo} from "@/utils/time";
import * as ArticleTypes from "@/api/article/types";
import {ArticleRecentReq} from "@/api/article/types";
import * as ArticleApis from "@/api/article";
import {queryRecentArticle} from "@/api/article";
import * as UserTypes from "@/api/user/types";
import * as UserApi from "@/api/user";
import {useRoute} from "vue-router";
import {ElMessage, UploadFile, UploadFiles} from "element-plus";
import {useLoginStore} from "@/store/login";
import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper";
import * as FileApis from "@/api/file"
import {BusinessType} from "@/api/file/types"
import {base64toFile} from "@/utils/file"
import {Camera} from '@element-plus/icons-vue'
import ArticleList from "@/components/article/ArticleList.vue";
import RecentArticleList from "@/components/article/RecentArticleList.vue";
import ArticleCategory from "@/components/article/ArticleCategory.vue";
import UserAvatar from "@/components/common/UserAvatar.vue";
import SysMessageDialog from "@/components/feedback/SysMessageDialog.vue";

const route = useRoute()
const loginStore = useLoginStore()
const dataLoaded = ref(false)
const featRadio = ref("article")
const followRadio = ref("follow")
const userInfo = ref<UserTypes.UserDetailResp>()
const cropper = ref(null)
const following = ref(false)
const avatarCropperOption = ref({img: null, size: 1, outputType: 'png'})
const avatarDialogVisible = ref(false)
const selectedAvatarFiles = ref([])
const coverCropper = ref(null)
const coverCropperOption = ref({img: null, size: 1, outputType: 'png'})
const coverDialogVisible = ref(false)
const selectedCoverFiles = ref([])
const showSysMessageChatDialog = ref(false)
// 是否本人
const myself = ref(true)
const articleActiveTab = ref("article")
const pageIndex = ref(1)
const pageHasMore = ref(false)
const loadingMore = ref(false)
//文章
const userArticle = ref<ArticleTypes.ArticlePageResp[]>([])
//文章评论
const userArticleComments = ref<UserTypes.UserArticleCommentPageResp[]>([])
//文章收藏
const userArticleStar = ref<ArticleTypes.ArticlePageResp[]>([])
//用户粉丝
const userFollowed = ref<UserTypes.UserFollowedPageResp[]>([])
const userFollow = ref<UserTypes.UserFollowedPageResp[]>([])
//文章分类
const articleCategory = ref<ArticleTypes.ArticleCategoryCountResp[]>([])
//最近文章
const recentArticle = ref<ArticleTypes.ArticleRecentResp[]>([])

const loadUserInfo = (userId: number) => {
  UserApi.getDetail(userId).then(result => {
    userInfo.value = result
    dataLoaded.value = true
  })
}
const loadAuthorRecentArticle = (authorId: number) => {
  let req: ArticleRecentReq = {
    authorId: authorId
  }
  queryRecentArticle(req).then(result => {
    recentArticle.value = result
  })
}

const loadUserArticle = (userId: number) => {
  let req: ArticleTypes.ArticlePageReq = {
    current: pageIndex.value,
    size: 5,
    userId: userId
  }
  loadingMore.value = true
  ArticleApis.pageArticle(req).then(result => {
    pageHasMore.value = result.pages > result.current
    if (result.current == 1) {
      userArticle.value = result.records
    } else {
      userArticle.value.push(...result.records)
    }
    pageIndex.value++
    loadingMore.value = false
  })
}

const loadUserArticleComment = (userId: number) => {
  let req: UserTypes.UserArticleCommentPageReq = {
    current: pageIndex.value,
    size: 5,
    userId: userId
  }
  loadingMore.value = true
  UserApi.pageArticleComment(req).then(result => {
    pageHasMore.value = result.pages > result.current;
    if (result.current == 1) {
      userArticleComments.value = result.records
    } else {
      userArticleComments.value.push(...result.records)
    }
    pageIndex.value++
    loadingMore.value = false
  })
}

const loadUserArticleStar = (userId: number) => {
  let req: UserTypes.UserArticleStarPageReq = {
    current: pageIndex.value,
    size: 5,
    userId: userId
  }
  loadingMore.value = true
  UserApi.pageArticleStar(req).then(result => {
    pageHasMore.value = result.pages > result.current;
    if (result.current == 1) {
      userArticleStar.value = result.records
    } else {
      userArticleStar.value.push(...result.records)
    }
    pageIndex.value++
    loadingMore.value = false
  })
}

const loadUserFollowed = (userId: number) => {
  let req: UserTypes.UserFollowedPageReq = {
    current: pageIndex.value,
    size: 5,
    userId: userId
  }
  loadingMore.value = true
  UserApi.pageUserFollowed(req).then(result => {
    pageHasMore.value = result.pages > result.current;
    if (result.current == 1) {
      userFollowed.value = result.records
    } else {
      userFollowed.value.push(...result.records)
    }
    pageIndex.value++
    loadingMore.value = false
  })
}

const loadUserFollow = (userId: number) => {
  let req: UserTypes.UserFollowPageReq = {
    current: pageIndex.value,
    size: 5,
    userId: userId
  }
  loadingMore.value = true
  UserApi.pageUserFollow(req).then(result => {
    pageHasMore.value = result.pages > result.current;
    if (result.current == 1) {
      userFollow.value = result.records
    } else {
      userFollow.value.push(...result.records)
    }
    pageIndex.value++
    loadingMore.value = false
  })
}

const onArticleTabsChange = (tab) => {
  switch (tab) {
    case 'article':
      userArticle.value = []
      pageIndex.value = 1;
      pageHasMore.value = false;
      loadUserArticle(userInfo.value.id);
      break;
    case 'comment':
      userArticleComments.value = []
      pageIndex.value = 1;
      pageHasMore.value = false;
      loadUserArticleComment(userInfo.value.id);
      break;
    case 'star':
      userArticleStar.value = []
      pageIndex.value = 1;
      pageHasMore.value = false;
      loadUserArticleStar(userInfo.value.id);
      break;
    case 'follow':
      onFollowRadioChange('follow')
      break;
  }
}

const onAvatarUploadChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  avatarCropperOption.value.img = URL.createObjectURL(uploadFile.raw)
}

const handleAvatarDialogClose = (done: () => void) => {
  closeAvatarUpload()
  done()
}
const closeAvatarUpload = () => {
  avatarDialogVisible.value = false
  setTimeout(() => {
    avatarCropperOption.value.img = null
    selectedAvatarFiles.value = []
  }, 200)
}

const applyCrop = () => {
  avatarDialogVisible.value = false
  if (avatarCropperOption.value.img == null) {
    return
  }
  cropper.value.startCrop()//开始截图
  cropper.value.getCropData(data => {
    FileApis.upload(base64toFile(data, "userAvatar.png"), BusinessType.USER_AVATAR).then(result => {
      userInfo.value.avatar = result.fileId
      loginStore.avatar = result.fileId
      UserApi.updateUserInfo({userId: userInfo.value.id, avatar: result.fileId})
    })
  })
}

const onCoverUploadChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  coverCropperOption.value.img = URL.createObjectURL(uploadFile.raw)
}
const applyCoverCrop = () => {
  coverDialogVisible.value = false
  if (coverCropperOption.value.img == null) {
    return
  }
  coverCropper.value.startCrop()//开始截图
  coverCropper.value.getCropData((data: string) => {
    FileApis.upload(base64toFile(data, "userCover.png"), BusinessType.USER_COVER).then(result => {
      userInfo.value.cover = result.fileId
      UserApi.updateUserInfo({userId: userInfo.value.id, cover: result.fileId})
    })
  })
}
const closeCoverUpload = () => {
  coverDialogVisible.value = false
  setTimeout(() => {
    coverCropperOption.value.img = null
    selectedCoverFiles.value = []
  }, 200)
}
const handleCoverDialogClose = (done: () => void) => {
  closeCoverUpload()
  done()
}
const onFollowRadioChange = (value: string) => {
  pageIndex.value = 1;
  pageHasMore.value = false;
  if (value == "follow") {
    userFollow.value = []
    loadUserFollow(userInfo.value.id);
  } else {
    userFollowed.value = []
    loadUserFollowed(userInfo.value.id);
  }
}

const followUser = (userId: number, flag: boolean, callback: Function, onFinally: Function) => {
  let req: UserTypes.UserFollowReq = {
    userId: userId,
    flag: flag
  }
  UserApi.userFollow(req).then(() => {
    callback()
  }).finally(() => {
    onFinally()
  })
}
//加载分类列表
const loadArticleCategory = (userId: number) => {
  ArticleApis.countArticleCategory({authorId: userId}).then(result => {
    articleCategory.value = result
  })
}

onMounted(() => {
  let userId: number = Number(route.params.userId)
  myself.value = userId == loginStore.userId
  if (userId == null || isNaN(userId)) {
    ElMessage({
      type: 'error',
      message: '缺少必要参数'
    })
    return
  }
  // 加载用户信息
  loadUserInfo(userId)
  // 加载文章列表
  loadUserArticle(userId)
  // 最近文章
  loadAuthorRecentArticle(userId)
  // 文章分类
  loadArticleCategory(userId)
})
</script>

<template>
  <div class="w-full h-full overflow-auto bg-white-soft">
    <div class="mt-6">
      <div class="ui FHContainer">
        <div class="FHMain">
          <div class="FHContent has-aside flex flex-row">
            <div class="content">
              <div v-if="dataLoaded">
                <!--用户信息概览-->
                <div class="user-profile-head bg-white border-box text-center relative"
                     :style="{ backgroundImage:  userInfo.cover ? `url(${FileApis.getDownloadUrl(userInfo.cover)})`: `url('/images/site/user_profile_background.jpeg')` }">
                  <div class="user-profile-overlay"/>
                  <div class="absolute text-right right-5 top-5" id="change-cover-btn">
                    <el-button type="primary" :icon="Camera" @click="coverDialogVisible = true">修改封面</el-button>
                  </div>
                  <div class="user-profile-main">
                    <div class="mb-4 mt-4 text-center">
                      <div class="inline-block w-[80px] h-[80px] relative" @click="avatarDialogVisible = true">
                        <UserAvatar :size="80" :file-id="userInfo.avatar"></UserAvatar>
                        <div class="absolute w-[84px] h-[84px] bg-white"
                             style="border-radius:50%;z-index: -1;top:-2px;left: -2px"></div>
                        <div class="avatar-overlay flex items-center justify-center">
                          <el-image :src="'/svg/camera-white.svg'" style="width: 35px; height: 35px"
                                    fit="cover"></el-image>
                        </div>
                      </div>
                    </div>
                    <p class="text-2xl font-bold text-white mb-4">{{ userInfo.nickname }}</p>
                    <p class="mb-4">
                      {{ isEmptyString(userInfo.signature) ? '这个人很懒，什么都没有留下～' : userInfo.signature }}</p>
                    <div class="text-white font-bold text-xl mb-4"><span>{{ userInfo.articleCount }} 文章</span><span
                        class="ml-4">{{ userInfo.articleCommentCount }} 评论</span><span
                        class="ml-4">{{ userInfo.followedCount }} 粉丝</span>
                    </div>
                    <div class="text-center mb-4">
                      <el-button type="primary" class="mr-3"
                                 @click="following=true;followUser(userInfo.id, false, ()=>{userInfo.hasFollow = false;userInfo.followedCount--}, ()=>following=false)"
                                 v-if="userInfo.hasFollow" plain :loading="following">已关注
                      </el-button>
                      <el-button icon="Plus" type="primary" class="mr-3"
                                 @click="following=true;followUser(userInfo.id, true, ()=>{userInfo.hasFollow = true;userInfo.followedCount++}, ()=>following=false)"
                                 :loading="following" v-else>关注
                      </el-button>
                      <el-button icon="Message" type="primary" @click="showSysMessageChatDialog = true">私信</el-button>
                    </div>
                  </div>
                </div>
                <!--模块标签-->
                <div class="">
                  <!--文章-->
                  <div class="text-center">
                    <el-radio-group v-model="featRadio" size="large">
                      <el-radio-button label="文章" value="article"/>
                      <el-radio-button label="问答" value="question"/>
                    </el-radio-group>
                  </div>
                  <el-tabs v-if="featRadio == 'article'" @tab-change="onArticleTabsChange"
                           v-model="articleActiveTab">
                    <el-tab-pane label="文章" name="article" class="p-5">
                      <div>
                        <div v-if="userInfo.articleCount <= 0" class="text-center">
                          <el-image :src="'/svg/userCenter/empty-post.svg'" fit="cover"></el-image>
                          <p class="text-gray-300 mt-3">{{ myself ? '您' : '该用户' }}还没有发布任何文章</p>
                        </div>
                        <div v-else>
                          <ArticleList :article-list="userArticle" :show-author="false"></ArticleList>
                          <div class="text-center" v-if="pageHasMore">
                            <el-button type="primary" :loading="loadingMore" plain
                                       @click="loadUserArticle(userInfo.id)">点击查看更多
                            </el-button>
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="评论" name="comment" class="p-5">
                      <div>
                        <div v-if="userInfo.articleCommentCount <= 0" class="text-center">
                          <el-image :src="'/svg/userCenter/empty-comment.svg'" fit="cover"></el-image>
                          <p class="text-gray-300 mt-3">{{ myself ? '您' : '该用户' }}还没有发布任何评论</p>
                        </div>
                        <div v-else class="px-4">
                          <ul class="text-left">
                            <li v-for="comment in userArticleComments">
                              <div class="flex flex-row items-center">
                                <el-icon :size="24"
                                         color="var(--color-gray-400)" class="mr-0.5">
                                  <ChatLineRound/>
                                </el-icon>
                                <span class="text-base mr-4">{{ formatTimeAgo(comment.commentTime) }}</span>
                                <span class="text-base mr-1">评论于</span>
                                <span class="text-base"><RouterLink :to="'/article/detail/' + comment.articleId"><span
                                    class="primary">{{ comment.articleTitle }}</span></RouterLink></span>
                              </div>
                              <RouterLink :to="`/article/detail/${comment.articleId}#comment-${comment.id}`"><p
                                  class="mt-4 text-lg hover-primary">{{ comment.content }}</p></RouterLink>
                              <el-divider></el-divider>
                            </li>
                          </ul>
                          <div class="text-center" v-if="pageHasMore">
                            <el-button type="primary" :loading="loadingMore" plain
                                       @click="loadUserArticleComment(userInfo.id)">点击查看更多
                            </el-button>
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="关注" name="follow" class="p-5">
                      <div class="text-center">
                        <el-radio-group v-model="followRadio" @change="onFollowRadioChange">
                          <el-radio-button label="Ta关注的人" value="follow"/>
                          <el-radio-button label="关注Ta的人" value="followed"/>
                        </el-radio-group>
                      </div>
                      <div>
                        <!--Ta关注的人-->
                        <div v-if="followRadio == 'follow'">
                          <div v-if="userInfo.followCount <= 0" class="text-center">
                            <el-image :src="'/svg/userCenter/empty-follow.svg'" fit="cover"></el-image>
                            <p class="text-gray-300 mt-3">{{ myself ? '您' : '该用户' }}还没有关注任何用户</p>
                          </div>
                          <div v-else>
                            <ul class="mb-3">
                              <li v-for="follow in userFollow"
                                  class="flex flex-row h-[120px] py-4 items-center border-b">
                                <RouterLink :to="'/user/center/'+ follow.id">
                                  <UserAvatar :size="80" :file-id="follow.avatar"></UserAvatar>
                                </RouterLink>
                                <div class="ml-5 h-full text-left flex-1">
                                  <div class="mb-2">{{ follow.nickname }}</div>
                                  <div class="mb-2 line-clamp-1">{{
                                      isEmptyString(follow.signature) ? '这个人很懒，什么都没有留下～' : follow.signature
                                    }}
                                  </div>
                                  <div class="text-gray-500">
                                    <span>{{ follow.articleCount }} 文章</span>
                                    <span class="ml-4">{{ follow.articleCommentCount }} 评论</span>
                                    <span class="ml-4">{{ follow.followedCount }} 粉丝</span>
                                  </div>
                                </div>
                                <div class="ml-5 text-right">
                                  <el-button v-if="follow.hasFollow" :loading="follow.following??false"
                                             type="primary" plain class="mr-3"
                                             @click="follow.following=true;followUser(follow.id, false, ()=>{follow.hasFollow=false;follow.followedCount--}, ()=>follow.following=false)">
                                    已关注
                                  </el-button>
                                  <el-button v-else icon="Plus" type="primary" class="mr-3"
                                             @click="follow.following=true;followUser(follow.id, true, ()=>{follow.hasFollow=true;follow.followedCount++},()=>follow.following=false)">
                                    关注
                                  </el-button>
                                  <el-button icon="Message" type="primary">私信</el-button>
                                </div>
                              </li>
                            </ul>
                            <div class="text-center" v-if="pageHasMore">
                              <el-button type="primary" :loading="loadingMore" plain
                                         @click="loadUserFollow(userInfo.id)">点击查看更多
                              </el-button>
                            </div>
                          </div>
                        </div>
                        <!--关注Ta的人-->
                        <div v-else>
                          <div v-if="userInfo.followedCount <= 0" class="text-center">
                            <el-image :src="'/svg/userCenter/empty-follow.svg'" fit="cover"></el-image>
                            <p class="text-gray-300 mt-3">{{ myself ? '您' : '该用户' }}还没有被任何粉丝关注</p>
                          </div>
                          <div v-else>
                            <ul class="mb-3">
                              <li v-for="followed in userFollowed"
                                  class="flex flex-row h-[120px] py-4 items-center border-b">
                                <RouterLink :to="'/user/center/'+ followed.id">
                                  <UserAvatar :size="80" :file-id="followed.avatar"></UserAvatar>
                                </RouterLink>
                                <div class="ml-5 h-full text-left flex-1">
                                  <div class="mb-2">
                                    <RouterLink :to="'/user/center/'+ followed.id">{{ followed.nickname }}</RouterLink>
                                  </div>
                                  <div class="mb-2 line-clamp-1">{{
                                      isEmptyString(followed.signature) ? '这个人很懒，什么都没有留下～' : followed.signature
                                    }}
                                  </div>
                                  <div class="text-gray-500">
                                    <span>{{ followed.articleCount }} 文章</span>
                                    <span class="ml-4">{{ followed.articleCommentCount }} 评论</span>
                                    <span class="ml-4">{{ followed.followedCount }} 粉丝</span>
                                  </div>
                                </div>
                                <div class="ml-5 text-right">
                                  <el-button v-if="followed.hasFollow" :loading="followed.following??false"
                                             type="primary" plain class="mr-3"
                                             @click="followed.following=true;followUser(followed.id, false, ()=>{followed.hasFollow=false;followed.followedCount--}, ()=>followed.following=false)">
                                    已关注
                                  </el-button>
                                  <el-button v-else icon="Plus" type="primary" class="mr-3"
                                             @click="followed.following=true;followUser(followed.id, true, ()=>{followed.hasFollow=true;followed.followedCount++},()=>followed.following=false)">
                                    关注
                                  </el-button>
                                  <el-button icon="Message" type="primary">私信</el-button>
                                </div>
                              </li>
                            </ul>
                            <div class="text-center" v-if="pageHasMore">
                              <el-button type="primary" :loading="loadingMore" plain
                                         @click="loadUserFollowed(userInfo.id)">点击查看更多
                              </el-button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="收藏" name="star" class="p-5">
                      <div>
                        <div v-if="userInfo.articleCount <= 0" class="text-center">
                          <el-image :src="'/svg/userCenter/empty-favorite.svg'" fit="cover"></el-image>
                          <p class="text-gray-300 mt-3">{{ myself ? '您' : '该用户' }}还没有收藏的文章</p>
                        </div>
                        <div v-else>
                          <ArticleList :article-list="userArticleStar" :show-author="true"></ArticleList>
                          <div class="text-center" v-if="pageHasMore">
                            <el-button type="primary" :loading="loadingMore" plain
                                       @click="loadUserArticleStar(userInfo.id)">点击查看更多
                            </el-button>
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                  <!--问答-->
                  <el-tabs v-else>
                    <el-tab-pane label="问题">
                      <div class="text-center">
                        <el-image :src="'/svg/userCenter/empty-post.svg'" fit="cover"></el-image>
                        <p class="text-gray-300 mt-3">{{ myself ? '您' : '该用户' }}还没有任何提问</p>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="回答">
                      <div class="text-center">
                        <el-image :src="'/svg/userCenter/empty-comment.svg'" fit="cover"></el-image>
                        <p class="text-gray-300 mt-3">{{ myself ? '您' : '该用户' }}还没有回答任何问题</p>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="收藏">
                      <div class="text-center">
                        <el-image :src="'/svg/userCenter/empty-favorite.svg'" fit="cover"></el-image>
                        <p class="text-gray-300 mt-3">{{ myself ? '您' : '该用户' }}还没有收藏的问题</p>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
              <div v-else>
                <el-skeleton/>
              </div>
            </div>
            <div class="aside">
              <!--最近文章-->
              <RecentArticleList :articleList="recentArticle"></RecentArticleList>
              <!--分类目录-->
              <ArticleCategory :article-category="articleCategory" :author-id="userInfo?.id"></ArticleCategory>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--修改头像弹框-->
    <el-dialog
        v-model="avatarDialogVisible"
        title="选择图片"
        width="632"
        :before-close="handleAvatarDialogClose"
    >
      <div v-if="avatarCropperOption.img == null" class="text-center">
        <el-image src="/svg/camera.svg" class="mb-3"></el-image>
        <p class="mb-3">请选择头像图片</p>
        <el-upload
            v-model:file-list="selectedAvatarFiles"
            accept="image/*"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="onAvatarUploadChange"
        >
          <el-button type="primary">选择图片</el-button>
          <template #tip>
            <div class="el-upload__tip">
              只支持小于500kb的jpg/png文件
            </div>
          </template>
        </el-upload>
      </div>
      <div class="w-[600px] h-[400px]" v-else>
        <vueCropper
            ref="cropper"
            :img="avatarCropperOption.img"
            autoCrop
            fixed
            :outputSize="avatarCropperOption.size"
            :outputType="avatarCropperOption.outputType"
            mode="cover"
        ></vueCropper>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="applyCrop">
            应用
          </el-button>
          <el-button @click="closeAvatarUpload">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!--修改封面弹框-->
    <el-dialog
        v-model="coverDialogVisible"
        title="选择图片"
        width="932"
        :before-close="handleCoverDialogClose"
    >
      <div v-if="coverCropperOption.img == null" class="text-center">
        <el-image src="/svg/camera.svg" class="mb-3"></el-image>
        <p class="mb-3">请选择封面图片</p>
        <el-upload
            v-model:file-list="selectedCoverFiles"
            accept="image/*"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="onCoverUploadChange"
        >
          <el-button type="primary">选择图片</el-button>
          <template #tip>
            <div class="el-upload__tip">
              只支持小于500kb的jpg/png文件
            </div>
          </template>
        </el-upload>
      </div>
      <div class="w-[890px] h-[450px]" v-else>
        <vueCropper
            ref="coverCropper"
            :img="coverCropperOption.img"
            autoCrop
            fixed
            :fixedNumber="[3, 1]"
            :outputSize="coverCropperOption.size"
            :outputType="coverCropperOption.outputType"
            mode="cover"
        ></vueCropper>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="applyCoverCrop">
            应用
          </el-button>
          <el-button @click="closeCoverUpload">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <SysMessageDialog v-if="showSysMessageChatDialog" :to-user-id="userInfo?.id" @onClose="showSysMessageChatDialog = false"></SysMessageDialog>
  </div>
</template>

<style>
.user-profile-head {
  overflow: hidden;
  background-size: cover;
}

.user-profile-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 透明度可调整，0.5表示50%黑色 */
}

.user-profile-main {
  position: relative;
  color: white;
  z-index: 1;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
  opacity: 0;
  z-index: 2;
}

.avatar-overlay:hover {
  opacity: 1;
}

#change-cover-btn {
  display: none;
}

.user-profile-head:hover #change-cover-btn {
  display: block;
}
</style>